<template>
	<el-main>
		<el-card shadow="never" header="async-validator内置">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px" status-icon>
				<el-form-item label="必填" prop="required">
					<el-input v-model="form.required"></el-input>
				</el-form-item>
				<el-form-item label="长度" prop="length">
					<el-input v-model="form.length" placeholder="长度需为3位"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-input v-model="form.type" placeholder="类型可为string number boolean array date url email等"></el-input>
				</el-form-item>
				<el-form-item label="范围" prop="range">
					<el-input v-model="form.range" placeholder="请填写范围在3至5位"></el-input>
				</el-form-item>
				<el-form-item label="枚举" prop="enum">
					<el-input v-model="form.enum" placeholder="请填写admin，user，guest其一"></el-input>
				</el-form-item>
				<el-form-item label="自定义" prop="custom">
					<el-input v-model="form.custom" placeholder="请填写数字1"></el-input>
				</el-form-item>
				<el-form-item label="异步验证" prop="async">
					<el-input
						v-model="form.async"
						placeholder="请输入SCUI最新版本号,form开启status-icon后 可以查看右侧状态"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submit">验证所有字段</el-button>
					<el-button @click="resetForm('form')">Reset</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="never" header="自定义" style="margin-top: 15px">
			<el-form ref="form2" :model="form2" :rules="rules2" label-width="100px" status-icon>
				<el-form-item label="手机号码" prop="phone">
					<el-input v-model="form2.phone"></el-input>
				</el-form-item>
				<el-form-item label="车牌号码" prop="cars">
					<el-input v-model="form2.cars"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submit2">验证所有字段</el-button>
					<el-button @click="resetForm('form2')">Reset</el-button>
				</el-form-item>
			</el-form>
			<el-alert
				title="自定义验证可在 @/utils/verificate.js 中不断扩展业务需要的验证. 记得要 import 进来"
				type="success"
			/>
		</el-card>
	</el-main>
</template>

<script>
import { verifyPhone, verifyCars } from '@/utils/verificate'

export default {
	name: 'verificate',
	data() {
		return {
			form: {},
			rules: {
				required: [{ required: true, message: '请填写' }],
				length: [{ required: true, len: 3, message: '长度需为3位' }],
				type: [{ required: true, type: 'email', message: '类型需为email' }],
				range: [{ required: true, min: 3, max: 5, message: '范围在3至5位' }],
				enum: [
					{ required: true, type: 'enum', enum: ['admin', 'user', 'guest'], message: '请填写admin，user，guest其一' }
				],
				custom: [
					{
						required: true,
						validator: (rule, value) => {
							return value === '1'
						},
						message: '请填写数字1',
						trigger: 'blur'
					}
				],
				async: [
					{
						required: true,
						validator: (rule, value, callback) => {
							this.$API.demo.ver.get({ value: value }).then((res) => {
								if (res.data !== value) {
									return callback(new Error('请输入SCUI最新版本号：' + res.data))
								}
								callback()
							})
						},
						trigger: 'blur'
					}
				]
			},
			form2: {},
			rules2: {
				phone: [
					{ required: true, message: '请输入姓名' },
					{ validator: verifyPhone, trigger: 'blur' }
				],
				cars: [{ required: true, validator: verifyCars, trigger: 'blur' }]
			}
		}
	},
	mounted() {},
	methods: {
		submit() {
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					this.$message.success('全部验证通过')
				} else {
					return false
				}
			})
		},
		submit2() {
			this.$refs.form2.validate(async (valid) => {
				if (valid) {
					this.$message.success('全部验证通过')
				} else {
					return false
				}
			})
		},
		resetForm(ref) {
			this.$refs[ref].resetFields()
		}
	}
}
</script>

<style></style>
